<template>
  <table>
    <thead>
      <tr>
        <th rowspan="2" v-for="(value, index) in props.tableList" :key="index">
          {{ value.thName }}
        </th>
      </tr>
    </thead>
    <tbody v-if="!tableCentent || tableCentent.length === 0">
      <tr style="line-height: 36px; border: none; margin-top: 50px">
        暂无数据
      </tr>
    </tbody>
    <tbody v-else>
      <tr v-for="(valCentent, indexs) in props.tableCentent" :key="indexs">
        <td rowspan="2" :style="{ color: indexs < 3 ? '#FFC100' : '#028cda' }">
          {{ indexs+1 }}
        </td>
        <td rowspan="2">
          {{ valCentent.taName }}
        </td>
        <td rowspan="2">
          {{ valCentent.tdVal }}
        </td>
      </tr>
    </tbody>
  </table>
</template>
<script setup>
import {
  ref,
  reactive,
  computed,
  defineProps,
  onMounted,
  watch,
  nexttick,
} from "vue";
const props = defineProps({
  tableList: {
    type: Array,
  },
  tableCentent: {
    type: Array,
  },
});

//自动滚动动画，支持向上和向下滚动
const ScrollTop = (number = 0, time) => {
  if (!time) {
    // document.body.scrollTop = document.documentElement.scrollTop = number;
    document.getElementsByTagName("tbody")[0].scrollTop =
      document.documentElement.scrollTop = number;
    return number;
  }
  const spacingTime = 20; // 设置循环的间隔时间  值越小消耗性能越高
  let spacingInex = time / spacingTime; // 计算循环的次数
  let nowTop = document.body.scrollTop + document.documentElement.scrollTop; // 获取当前滚动条位置
  let everTop = (number - nowTop) / spacingInex; // 计算每次滑动的距离
  let scrollTimer = setInterval(() => {
    if (spacingInex > 0) {
      console.log("底部");
      spacingInex--;
      ScrollTop((nowTop += everTop));
    } else {
      console.log("返回顶部");
      ScrollTop(0, 0);
      clearInterval(scrollTimer); // 清除计时器
    }
  }, 30);
};

// 滚动到距离页面顶部500px的位置 动画时间为200ms

onMounted(() => {
  // ScrollTop(1000, 5000);
});
</script>
<style lang='less' scoped>
table {
  display: block;
  height: 100%;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  cursor: default;
  border: 1px solid rgba(2, 140, 218, 0.5);
}

tbody {
  display: block;
  height: 82%;
  border: 0;
  border-spacing: 0;
  border-collapse: collapse;
  cursor: default;
  overflow-y: scroll;
  overflow-x: hidden;
}
thead {
  display: table;
  width: 100%;
  table-layout: fixed;
  height: 18%;
  height: 18%;
}
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
  // height: 12.2%;
  height: 20%;
  width: calc(100% + 1.5px);
}
thead tr {
  height: 100%;
  display: table;
  width: 100%;
  table-layout: fixed;
}
table tbody {
  width: 100%;
}

table thead th {
  padding: 0;
  border-bottom: 1px solid rgba(2, 140, 218, 0.5);
  border-right: 1px solid rgba(2, 140, 218, 0.5);
  font-size: 13px;
  color: #028cda;
}

table tbody td {
  text-align: center;
  border-right: 1px solid rgba(2, 140, 218, 0.5);
  font-size: 12px;
  color: #d6e3ea;
}
::-webkit-scrollbar {
  width: 2px;
  height: 6px;
  background-color: transparent;
}
/*定义滚动条轨道内阴影+圆角*/
::-webkit-scrollbar-track {
  /* -webkit-box-shadow: inset 0 0 6px #bfa; */
  border-radius: 10px;
  background-color: #222837;
}
/*定义滑块内阴影+圆角*/
::-webkit-scrollbar-thumb {
  width: 1px;
  height: 10px;
  border-radius: 10px;
  background-color: #028cda;
}
</style>
